<template>
  <div class="paging">
    <el-pagination
      :current-page="current"
      :page-size="pageSize"
      layout="total"
      :total="total"
      @current-change="handleCurrentChange"
    />
    <el-pagination
      :current-page="current"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total"
      background
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    total: {
      type: Number,
      default: 1,
    },
    current: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {

    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleCurrentChange(index) {
      this.$emit('change-current', index)
    },
  },
}
</script>

<style lang="scss" >
.paging {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
.map-home-page{
  .bigContain{
    .el-table__header-wrapper{
      border-bottom: 1px solid #fff;
      margin-bottom: 5px;
    }
    .el-pagination{
      .el-pagination__total{
        color:#fff;
      }
      .el-pager{
        .number, .more{
         color:#fff;
         background:none;
         border-radius: 5px;
         border: 1px solid #00cfff;
         line-height: 24px;
        }
        .number.active{
         color:#fff;
        }
      }
      .btn-next,.btn-quickprev,.btn-prev,.el-pager li.btn-quicknext{
        color:#fff;
        background: none;
      }
      .el-pagination button:disabled{
        color: #999;
      }
    }
  }

}
</style>
